import React, { PureComponent } from 'react';
import { connect } from 'react-redux';
import { actionCreators } from './store';

import Container from '@icedesign/container';
import StateItem from './StateItem';

class AccountStatus extends PureComponent {
  static displayName = "AccountStatus";

  render() {
    const { userData } = this.props;
    let config = [];
    if (userData.realName != '' && userData.realName != null) {
      config.push({
        icon: require('./images/realName.png'),
        title: '实名认证用户',
        desc: '可进行版权交易，上传新作品',
        status: '认证通过',
      });
    } else {
      config.push({
        icon: require('./images/unRealName.png'),
        title: '未实名认证用户',
        desc: '未实名认证用户不可上传作品以及交易版权',
        status: '等待认证',
      });
    }
    return (
      <Container>
        <div style={styles.header}>
          <h2 style={{ margin: 0, fontSize: '16px' }}>实名认证</h2>
          <span style={{ fontSize: '12px', color: '#999', paddingLeft: '20px' }}>
            实名认证通过后，才可以进行作品版权交易以及上传新的作品等
          </span>
        </div>
        <div style={styles.body}>
          {config.map((item, index) => {
            return <StateItem data={item} key={index} />;
          })}
        </div>
      </Container>
    );
  }
}

const styles = {
  header: {
    display: 'flex',
    alignItems: 'center',
  },
};

const mapState = (state) => ({
  userData: state.getIn(["center", "userData"]).toJS()
});

export default connect(mapState, null)(AccountStatus);